iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

邁向 JavaScript 核心之路 系列 第 12

[Day 12] JavaScript 物件導向- 基本介紹

  • 分享至 

  • xImage
  •  

終於結束語法特性跟語法介紹的章節了,接下來我們會進到物件導向的部分,物件導向的章節我預計會介紹

  • 物件的組成
  • 類別與物件
  • 物件導向的特性
  • prototype
  • 私有函式與變數
  • 唯獨方法和屬性
  • 實字模式
  • 命名空間
  • 繼承

那就不多廢話了,讓我們繼續看下去吧!

基本介紹

常常坊間的書都會看到物件導向 (Object-oriented programming),也就是所謂的 OOP,對於非本科出身的我來說實在是非常陌生,不過在爬了許多文跟閱讀了一些書籍後,總結出了一些心得,如果要用一句話來概括的話

其實物件導向就是將程式設計的過程擬物化

大家都知道如何操作電視,例如開關電源、調整音量、選擇頻道等等,但我相信,大多人都不知道電視內部的運作原理吧?應該說知道的比較奇怪(?),但其實一般人並不需要了解電視的內部運作原理,對於我們來說,只要知道如何操作就好,因此我們可以把現實中的東西想成都是物件,如果可以把程式當作物件就能用更簡單的方式來操作。

類別與物件

類別 ( Class ):可想成是設計圖或者是範本,用來產生物件的基礎。
物件 ( Object ):設計圖可以決定房子有幾間房間、幾扇窗戶等等,物件就好像是實際蓋好的房子,同一份設計圖可以在不同的地點蓋出房子,透過類別去產生物件時,每一個物件都是各自獨立的。

以前的 JavaScript 並沒有像 Java 語言的 Class 語法(雖然 ES6 有 Class 語法,但它只是一種語法糖,背後的原理仍然是採用 prototype-based ),所以 JavaScript 是使用 Funtion 來替代 Class。
傳統的物件導向 ( class-based )與 JavaScript 的物件導向 ( prototype-based )差異在於,JavaScript 可以任意的新增屬性與方法。

物件的組成

我們先前常會講到 方法屬性這兩個名詞,但這跟 函式變數 有何不同呢?

  • 方法(屬於一個物件)等同於 函式 (自由的、不屬於任何人)。
  • 屬性(屬於一個物件)等同於 變數 (自由的、不屬於任何人)。

看起來有點不太好懂,簡單來說,在結婚前,我們會稱彼此的伴侶為 男女朋友,但結婚後會改稱為老公老婆,
但人其實還是一樣沒變,不知道大家對這樣的概念是否能理解?

物件導向特性

封裝:如同電視的概念,隱藏細節,不需要內部的原理,只需要知道如何操作即可,這樣也能確保使用者無法任意的變更物件內部的資料。

繼承:可以從父類別繼承出方法和屬性,子類別又可以根據需求擴充出一些自己的特性,透過繼承來減少重複功能的程式碼,只需要擴充出差異的部分即可。

多型:可依照不同的情境變換資料的型態,指一個物件可扮演不同角色的特性。舉例來說,貓跟狗都是動物,並且都有叫的功能,但他們的叫聲卻是不同的。


進到物件導向的章節,我好興奮R (?),希望能敘述的簡單直白,讓各位能有個概念,自己的印象也能加深。

參考資料:
Tommy - 深入 JavaScript 核心課程
wikipedia - 物件導向程式設計
Summer。桑莫。夏天 - 你懂 JavaScript 嗎?#18 (簡易版)物件導向概念


上一篇
[Day 11] JavaScript 寫作風格
下一篇
[Day 13] JavaScript 物件導向- This 與 內建物件
系列文
邁向 JavaScript 核心之路 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言